<template>
    <el-input v-model="defaultValue" v-bind="$attrs">
        <template #append>
            <el-dropdown  @command="onShortcuts">
                <el-button icon="el-icon-arrow-down"></el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="0 * * * * ?">每分钟</el-dropdown-item>
                        <el-dropdown-item command="0 0 * * * ?">每小时</el-dropdown-item>
                        <el-dropdown-item command="0 0 0 * * ?">每天零点</el-dropdown-item>
                        <el-dropdown-item command="0 0 0 1 * ?">每月一号零点</el-dropdown-item>
                        <el-dropdown-item command="0 0 0 L * ?">每月最后一天零点</el-dropdown-item>
                        <el-dropdown-item command="0 0 0 ? * 1">每周星期日零点</el-dropdown-item>
                        <el-dropdown-item v-for="(item, index) in shortcuts" :key="item.value" :command="item.value" :divided="index==0">{{ item.text }}</el-dropdown-item>
                        <el-dropdown-item command="custom" divided icon="el-icon-plus">自定义</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </el-input>

    <el-dialog v-model="dialogVisible" :width="580" append-to-body destroy-on-close title="cron规则生成器">
        <div class="sc-cron">
            <el-tabs>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>秒</h2>
                            <h4>{{ value_second }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.second.type">
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.second.type==1" label="范围">
                            <el-input-number v-model="value.second.range.start" :max="59" :min="0" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.second.range.end" :max="59" :min="0" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.second.type==2" label="间隔">
                            <el-input-number v-model="value.second.loop.start" :max="59" :min="0" controls-position="right"></el-input-number>
                            秒开始，每
                            <el-input-number v-model="value.second.loop.end" :max="59" :min="0" controls-position="right"></el-input-number>
                            秒执行一次
                        </el-form-item>
                        <el-form-item v-if="value.second.type==3" label="指定">
                            <el-select v-model="value.second.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.second" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>分钟</h2>
                            <h4>{{ value_minute }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.minute.type">
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.minute.type==1" label="范围">
                            <el-input-number v-model="value.minute.range.start" :max="59" :min="0" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.minute.range.end" :max="59" :min="0" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.minute.type==2" label="间隔">
                            <el-input-number v-model="value.minute.loop.start" :max="59" :min="0" controls-position="right"></el-input-number>
                            分钟开始，每
                            <el-input-number v-model="value.minute.loop.end" :max="59" :min="0" controls-position="right"></el-input-number>
                            分钟执行一次
                        </el-form-item>
                        <el-form-item v-if="value.minute.type==3" label="指定">
                            <el-select v-model="value.minute.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.minute" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>小时</h2>
                            <h4>{{ value_hour }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.hour.type">
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.hour.type==1" label="范围">
                            <el-input-number v-model="value.hour.range.start" :max="23" :min="0" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.hour.range.end" :max="23" :min="0" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.hour.type==2" label="间隔">
                            <el-input-number v-model="value.hour.loop.start" :max="23" :min="0" controls-position="right"></el-input-number>
                            小时开始，每
                            <el-input-number v-model="value.hour.loop.end" :max="23" :min="0" controls-position="right"></el-input-number>
                            小时执行一次
                        </el-form-item>
                        <el-form-item v-if="value.hour.type==3" label="指定">
                            <el-select v-model="value.hour.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.hour" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>日</h2>
                            <h4>{{ value_day }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.day.type">
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                                <el-radio-button label="4">本月最后一天</el-radio-button>
                                <el-radio-button label="5">不指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.day.type==1" label="范围">
                            <el-input-number v-model="value.day.range.start" :max="31" :min="1" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.day.range.end" :max="31" :min="1" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.day.type==2" label="间隔">
                            <el-input-number v-model="value.day.loop.start" :max="31" :min="1" controls-position="right"></el-input-number>
                            号开始，每
                            <el-input-number v-model="value.day.loop.end" :max="31" :min="1" controls-position="right"></el-input-number>
                            天执行一次
                        </el-form-item>
                        <el-form-item v-if="value.day.type==3" label="指定">
                            <el-select v-model="value.day.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.day" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>月</h2>
                            <h4>{{ value_month }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.month.type">
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.month.type==1" label="范围">
                            <el-input-number v-model="value.month.range.start" :max="12" :min="1" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.month.range.end" :max="12" :min="1" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.month.type==2" label="间隔">
                            <el-input-number v-model="value.month.loop.start" :max="12" :min="1" controls-position="right"></el-input-number>
                            月开始，每
                            <el-input-number v-model="value.month.loop.end" :max="12" :min="1" controls-position="right"></el-input-number>
                            月执行一次
                        </el-form-item>
                        <el-form-item v-if="value.month.type==3" label="指定">
                            <el-select v-model="value.month.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.month" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>周</h2>
                            <h4>{{ value_week }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form>
                            <el-form-item label="类型">
                                <el-radio-group v-model="value.week.type">
                                    <el-radio-button label="0">任意值</el-radio-button>
                                    <el-radio-button label="1">范围</el-radio-button>
                                    <el-radio-button label="2">间隔</el-radio-button>
                                    <el-radio-button label="3">指定</el-radio-button>
                                    <el-radio-button label="4">本月最后一周</el-radio-button>
                                    <el-radio-button label="5">不指定</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item v-if="value.week.type==1" label="范围">
                                <el-select v-model="value.week.range.start">
                                    <el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                <span style="padding:0 15px;">-</span>
                                <el-select v-model="value.week.range.end">
                                    <el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="value.week.type==2" label="间隔">
                                第
                                <el-input-number v-model="value.week.loop.start" :max="4" :min="1" controls-position="right"></el-input-number>
                                周的星期
                                <el-select v-model="value.week.loop.end">
                                    <el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                执行一次
                            </el-form-item>
                            <el-form-item v-if="value.week.type==3" label="指定">
                                <el-select v-model="value.week.appoint" multiple style="width: 100%;">
                                    <el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="value.week.type==4" label="最后一周">
                                <el-select v-model="value.week.last">
                                    <el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                        <div class="sc-cron-num">
                            <h2>年</h2>
                            <h4>{{ value_year }}</h4>
                        </div>
                    </template>
                    <el-form>
                        <el-form-item label="类型">
                            <el-radio-group v-model="value.year.type">
                                <el-radio-button label="-1">忽略</el-radio-button>
                                <el-radio-button label="0">任意值</el-radio-button>
                                <el-radio-button label="1">范围</el-radio-button>
                                <el-radio-button label="2">间隔</el-radio-button>
                                <el-radio-button label="3">指定</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="value.year.type==1" label="范围">
                            <el-input-number v-model="value.year.range.start" controls-position="right"></el-input-number>
                            <span style="padding:0 15px;">-</span>
                            <el-input-number v-model="value.year.range.end" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="value.year.type==2" label="间隔">
                            <el-input-number v-model="value.year.loop.start" controls-position="right"></el-input-number>
                            年开始，每
                            <el-input-number v-model="value.year.loop.end" :min="1" controls-position="right"></el-input-number>
                            年执行一次
                        </el-form-item>
                        <el-form-item v-if="value.year.type==3" label="指定">
                            <el-select v-model="value.year.appoint" multiple style="width: 100%;">
                                <el-option v-for="(item, index) in data.year" :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>

        <template #footer>
            <el-button @click="dialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 认</el-button>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import {computed, reactive, ref, watch} from "vue";

const props = defineProps({
    shortcuts: {type: Array, default: () => []}
})

const defaultValue = defineModel({default: '* * * * * ?'});

const getYear = () =>{
    let v = []
    let y = new Date().getFullYear()
    for (let i = 0; i < 11; i++) {
        v.push(y + i)
    }
    return v
}

const dialogVisible = ref(false);
const type = ref('0');
const value = reactive({
    second: {
        type: '0',
        range: {
            start: 1,
            end: 2
        },
        loop: {
            start: 0,
            end: 1
        },
        appoint: []
    },
    minute: {
        type: '0',
        range: {
            start: 1,
            end: 2
        },
        loop: {
            start: 0,
            end: 1
        },
        appoint: []
    },
    hour: {
        type: '0',
        range: {
            start: 1,
            end: 2
        },
        loop: {
            start: 0,
            end: 1
        },
        appoint: []
    },
    day: {
        type: '0',
        range: {
            start: 1,
            end: 2
        },
        loop: {
            start: 1,
            end: 1
        },
        appoint: []
    },
    month: {
        type: '0',
        range: {
            start: 1,
            end: 2
        },
        loop: {
            start: 1,
            end: 1
        },
        appoint: []
    },
    week: {
        type: '5',
        range: {
            start: '2',
            end: '3'
        },
        loop: {
            start: 0,
            end: '2'
        },
        last: '2',
        appoint: []
    },
    year: {
        type: '-1',
        range: {
            start: getYear()[0],
            end: getYear()[1]
        },
        loop: {
            start: getYear()[0],
            end: 1
        },
        appoint: []
    }
});
const data = reactive({
    second: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
    minute: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
    hour: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
    day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
    month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    week: [
        {
            value: '1',
            label: '周日'
        },
        {
            value: '2',
            label: '周一'
        },
        {
            value: '3',
            label: '周二'
        },
        {
            value: '4',
            label: '周三'
        },
        {
            value: '5',
            label: '周四'
        },
        {
            value: '6',
            label: '周五'
        },
        {
            value: '7',
            label: '周六'
        }
    ],
    year: getYear()
})

const value_second = computed(() => {
    let v = value.second
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else {
        return '*'
    }
})
const value_minute = computed(() => {
    let v = value.minute
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else {
        return '*'
    }
})
const value_hour = computed(() => {
    let v = value.hour
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else {
        return '*'
    }
})
const value_day = computed(() => {
    let v = value.day
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else if (v.type === 4) {
        return 'L'
    } else if (v.type === 5) {
        return '?'
    } else {
        return '*'
    }
})
const value_month = computed(() => {
    let v = value.month
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else {
        return '*'
    }
})
const value_week = computed(() => {
    let v = value.week
    if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.end + '#' + v.loop.start
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : '*'
    } else if (v.type === 4) {
        return v.last + 'L'
    } else if (v.type === 5) {
        return '?'
    } else {
        return '*'
    }
})
const value_year = computed(() => {
    let v = value.year
    if (v.type === -1) {
        return ''
    } else if (v.type === 0) {
        return '*'
    } else if (v.type === 1) {
        return v.range.start + '-' + v.range.end
    } else if (v.type === 2) {
        return v.loop.start + '/' + v.loop.end
    } else if (v.type === 3) {
        return v.appoint.length > 0 ? v.appoint.join(',') : ''
    } else {
        return ''
    }
})

function onShortcuts(command: string) {
    if (command === 'custom') {
        open()
    } else {
        defaultValue.value = command
    }
}
function open() {
    set()
    dialogVisible.value = true
}

function set() {
    let arr = (defaultValue.value || "* * * * * ?").split(" ")
    //简单检查
    if (arr.length < 6) {
        this.$message.warning("cron表达式错误，已转换为默认表达式")
        arr = "* * * * * ?".split(" ")
    }

    //秒
    if (arr[0] === '*') {
        value.second.type = '0'
    } else if (arr[0].includes('-')) {
        value.second.type = '1'
        value.second.range.start = Number(arr[0].split("-")[0])
        value.second.range.end = Number(arr[0].split("-")[1])
    } else if (arr[0].includes('/')) {
        value.second.type = '2'
        value.second.loop.start = Number(arr[0].split("/")[0])
        value.second.loop.end = Number(arr[0].split("/")[1])
    } else {
        value.second.type = '3'
        value.second.appoint = arr[0].split(",")
    }
    //分
    if (arr[1] === '*') {
        value.minute.type = '0'
    } else if (arr[1].includes('-')) {
        value.minute.type = '1'
        value.minute.range.start = Number(arr[1].split("-")[0])
        value.minute.range.end = Number(arr[1].split("-")[1])
    } else if (arr[1].includes('/')) {
        value.minute.type = '2'
        value.minute.loop.start = Number(arr[1].split("/")[0])
        value.minute.loop.end = Number(arr[1].split("/")[1])
    } else {
        value.minute.type = '3'
        value.minute.appoint = arr[1].split(",")
    }
    //小时
    if (arr[2] === '*') {
        value.hour.type = '0'
    } else if (arr[2].includes('-')) {
        value.hour.type = '1'
        value.hour.range.start = Number(arr[2].split("-")[0])
        value.hour.range.end = Number(arr[2].split("-")[1])
    } else if (arr[2].includes('/')) {
        value.hour.type = '2'
        value.hour.loop.start = Number(arr[2].split("/")[0])
        value.hour.loop.end = Number(arr[2].split("/")[1])
    } else {
        value.hour.type = '3'
        value.hour.appoint = arr[2].split(",")
    }
    //日
    if (arr[3] === '*') {
        value.day.type = '0'
    } else if (arr[3] === 'L') {
        value.day.type = '4'
    } else if (arr[3] === '?') {
        value.day.type = '5'
    } else if (arr[3].includes('-')) {
        value.day.type = '1'
        value.day.range.start = Number(arr[3].split("-")[0])
        value.day.range.end = Number(arr[3].split("-")[1])
    } else if (arr[3].includes('/')) {
        value.day.type = '2'
        value.day.loop.start = Number(arr[3].split("/")[0])
        value.day.loop.end = Number(arr[3].split("/")[1])
    } else {
        value.day.type = '3'
        value.day.appoint = arr[3].split(",")
    }
    //月
    if (arr[4] === '*') {
        value.month.type = '0'
    } else if (arr[4].includes('-')) {
        value.month.type = '1'
        value.month.range.start = Number(arr[4].split("-")[0])
        value.month.range.end = Number(arr[4].split("-")[1])
    } else if (arr[4].includes('/')) {
        value.month.type = '2'
        value.month.loop.start = Number(arr[4].split("/")[0])
        value.month.loop.end = Number(arr[4].split("/")[1])
    } else {
        value.month.type = '3'
        value.month.appoint = arr[4].split(",")
    }
    //周
    if (arr[5] === '*') {
        value.week.type = '0'
    } else if (arr[5] === '?') {
        value.week.type = '5'
    } else if (arr[5].includes('-')) {
        value.week.type = '1'
        value.week.range.start = arr[5].split("-")[0]
        value.week.range.end = arr[5].split("-")[1]
    } else if (arr[5].includes('#')) {
        value.week.type = '2'
        value.week.loop.start = Number(arr[5].split("#")[1])
        value.week.loop.end = arr[5].split("#")[0]
    } else if (arr[5].includes('L')) {
        value.week.type = '4'
        value.week.last = arr[5].split("L")[0]
    } else {
        value.week.type = '3'
        value.week.appoint = arr[5].split(",")
    }
    //年
    if (!arr[6]) {
        value.year.type = '-1'
    } else if (arr[6] === '*') {
        value.year.type = '0'
    } else if (arr[6].includes('-')) {
        value.year.type = '1'
        value.year.range.start = Number(arr[6].split("-")[0])
        value.year.range.end = Number(arr[6].split("-")[1])
    } else if (arr[6].includes('/')) {
        value.year.type = '2'
        value.year.loop.start = Number(arr[6].split("/")[1])
        value.year.loop.end = Number(arr[6].split("/")[0])
    } else {
        value.year.type = '3'
        value.year.appoint = arr[6].split(",")
    }
}

function submit() {
    let year = value_year.value ? ' ' + value_year.value : ''
    defaultValue.value = value_second.value + ' ' + value_minute.value + ' ' + value_hour.value + ' ' + value_day.value + ' ' + value_month.value + ' ' + value_week.value + year
    dialogVisible.value = false
}

watch(() => value.week.type, (val) => {
    if (val !== '5') {
        value.day.type = '5'
    }
})

watch(() => value.day.type, (val) => {
    if (val !== '5') {
        value.week.type = '5'
    }
})

</script>

<style scoped>
.sc-cron:deep(.el-tabs__item) {
    height: auto;
    line-height: 1;
    padding: 0 7px;
    vertical-align: bottom;
}

.sc-cron-num {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
}

.sc-cron-num h2 {
    font-size: 12px;
    margin-bottom: 15px;
    font-weight: normal;
}

.sc-cron-num h4 {
    display: block;
    height: 32px;
    line-height: 30px;
    width: 100%;
    font-size: 12px;
    padding: 0 15px;
    background: var(--el-color-primary-light-9);
    border-radius: 4px;
}

.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
    background: var(--el-color-primary);
    color: #fff;
}

[data-theme='dark'] .sc-cron-num h4 {
    background: var(--el-color-white);
}
</style>
